<template>
	<view class="content">
		<g-watermark />
		<view style="margin: 0 auto" v-if="emailInfo.email">
			<text style="font-weight: bold">我的邮箱({{emailInfo.email}})</text>
		</view>
		<view class="content_box" v-for="(item,index) in tabs" :key="index" @click="handleClickItem(item)">
			<view class="content_box_img">
				<image :src="item.icon" alt="" style="width: 60rpx;height: 60rpx;" />
			</view>
			<view class="content_box_label">
				{{item.label}}
			</view>
		</view>
		<view style="margin-top: 20rpx;" v-if="listEmail&&listEmail.length>1">
			<view style="display: flex;gap:20rpx;font-size: 28rpx;justify-content: center;flex-direction: column;">
				<u-button size="medium" type="primary" @click="handleChangeEmail()">切换邮箱</u-button>
			</view>
		</view>
		<!-- 邮箱列表 -->
		<u-select v-model="selectShow" mode="single-column" :list="listEmail" @confirm="confirmSelect"
			@cancel="cancelSelect" value-name="id" label-name="email"></u-select>
	</view>
</template>

<script>
	import {
		postFormAction
	} from '@/utils/request.js';
	import in_box from '../static/externalEmail/in_box.png';
	import write from '../static/externalEmail/write.png';
	import garbage_bin from '../static/externalEmail/garbage_bin.png';
	import has_send from '../static/externalEmail/has_send.png';
	import draft from '../static/externalEmail/draft.png';
	import store from '@/store' // 引入vuex
	import {
		mapState
	} from "vuex";
	export default {
		data() {
			return {
				tabs: [{
						label: '写信',
						value: '1',
						icon: write,
					},
					{
						label: '收件箱',
						value: '2',
						icon: in_box,
					},
					{
						label: '草稿箱',
						value: '3',
						icon: draft,
					},
					{
						label: '发件箱',
						value: '4',
						icon: has_send,
					},
					{
						label: '垃圾箱',
						value: '5',
						icon: garbage_bin,
					},
				],
				isDoRefresh: false,
				urls: {
					getDefaultEmailId: '/email/getDefaultEmailId',
					listEmail: '/email/listEmail'
				},
				selectShow: false,
				emailInfo: {}, //当前email
				listEmail: [], //邮箱列表
			}
		},
		onLoad() {
			this.handleInit()
		},
		//刷页面
		onShow(e) {
			const that = this;
			let pages = getCurrentPages();
			//刷新页面
			let currPage = pages[pages.length - 1];
			if (currPage.isDoRefresh == true) {
				currPage.isDoRefresh = false;
				that.handleInit()
			}
		},
		// computed: {
		// 	...mapState(["userInfo"]),
		// 	deptCode() {
		// 		console.log('userInfo', this.userInfo)
		// 		return this.userInfo.deptCode
		// 	},
		// },
		methods: {
			handleInit() {
				this.getDefaultEmailIdData()
			},
			handleClickItem(item) {
				if (!this.emailInfo.id) {
					uni.showToast({
						icon: "none",
						title: "暂无邮箱，请先设置默认邮箱"
					})
					return
				}
				switch (item.value) {
					case '1':
						uni.navigateTo({
							url: `/cmn/externalEmail/writebox/index`,
						});
						break
					case '2':
						uni.navigateTo({
							url: `/cmn/externalEmail/inbox/index`,
						});
						break
					case '3':
						uni.navigateTo({
							url: `/cmn/externalEmail/draftbox/index`,
						});
						break
					case '4':
						uni.navigateTo({
							url: `/cmn/externalEmail/outbox/index`,
						});
						break
					case '5':
						uni.navigateTo({
							url: `/cmn/externalEmail/garbageBinbox/index`,
						});
						break
				}
			},
			//获取当前邮箱信息
			async getDefaultEmailIdData() {
				try {
					uni.showLoading({
						icon: 'none',
						title: '加载中...'
					})
					const res = await postFormAction(this.urls.getDefaultEmailId)
					this.emailInfo = res.data || {}
					this.setEmailInfo()
					uni.hideLoading()
				} catch (e) {
					uni.hideLoading()
				}
			},
			//获取邮箱列表
			async getListEmailData() {
				try {
					uni.showLoading({
						icon: 'none',
						title: '加载中...'
					})
					const res = await postFormAction(this.urls.listEmail, {
						emailId: this.emailInfo.id
					})
					this.listEmail = res.data || []
					uni.hideLoading()
				} catch (e) {
					uni.hideLoading()
				}
			},
			confirmSelect(e) {
				if (e && e.length) {
					this.emailInfo = e[0]
					this.setEmailInfo()
				}
			},
			//取消
			cancelSelect() {},

			//切换邮箱
			handleChangeEmail() {
				this.selectShow = true
			},
			//设置缓存
			setEmailInfo() {
				store.commit('SET_EMAIL_INFO', this.emailInfo);
			},

		}
	}
</script>

<style lang="less" scoped>
	.content {
		padding: 20rpx;
		display: flex;
		flex-direction: column;
		gap: 20rpx;

		&_box {
			display: flex;
			align-items: center;
			gap: 10px;

			&_img {}

			&_label {
				flex: 1;
				padding: 10px;
				border-bottom: 1px solid rgba(0, 0, 0, .1);
			}
		}
	}

	::v-deep .u-size-medium {
		padding: 0 40rpx !important;
	}
</style>